<template>
  <div class="menu_bg">
    <div class="menu">
      <!--Begin 商品分类详情 Begin-->
      <div class="nav" @mouseenter="show = true" @mouseleave="handleMouseLeave">
        <div class="nav_t">全部商品分类</div>
        <div class="leftNav" v-show="show" @mouseenter="showZj = true" @mouseleave="showZj = false">
          <ul>
            <li v-for="cat1 in cat1List" :key="cat1.id">
              <div class="fj" @mouseenter="showMenu(cat1.id)">
                <span class="n_img"><span></span><img src="@/assets/images/nav1.png" /></span>
                <span class="fl"><a href="#" @click.prevent="searchProduct(cat1.id, '', '')">{{ cat1.name }}</a></span>
              </div>
            </li>
          </ul>
          <div class="zj" v-show="showZj">
            <div class="zj_row" v-for="cat2 in cat2List" :key="cat2.id">
              <h2>
                <a href="#" @click.prevent="searchProduct(currentCat1Id, cat2.id, '')">
                  {{ cat2.name }}
                </a>
              </h2>
              <div class="cat3-wrapper">
                <a href="#" v-for="cat3 in cat2.children" :key="cat3.id"
                  @click.prevent="searchProduct(currentCat1Id, cat2.id, cat3.id)">
                  {{ cat3.name }} &nbsp;|
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--End 商品分类详情 End-->
      <ul class="menu_r">
        <li><a href="#" @click="toIndex()">首页</a></li>
        <li v-for="cat1 in cat1List" :key="cat1.id"><a href="#" @click.prevent="searchProduct(cat1.id, '', '')">{{
          cat1.name }}</a>&nbsp;</li>
      </ul>
      <div class="m_ad">中秋送好礼！</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HeaderMenu',
  data() {
    return {
      show: false,
      showZj: false,
      activeMenuId: null,
      currentCat1Id: null, // 当前选中的一级分类的id
      // 商品分级数据
      cat1List: [],   // 一级
      cat2List: [],   // 二级
      cat3List: [],   // 三级

      // 返回的树形数据
      treeData: [],

      search: {
        // 以下 3 个是搜索条件提交的等级
        categoryLevel1Id: '',
        categoryLevel2Id: '',
        categoryLevel3Id: '',
      }
    }
  },
  methods: {
    handleMouseLeave() {
      if (!this.isIndexPage) {
        this.show = false;
      }
    },
    toIndex() {
      this.product = '';
      if (!(this.$route.path === '/')) {
        this.$router.push('/')
      }
    },
    showMenu(id) {
      this.activeMenuId = id
      this.currentCat1Id = id
      // 找到对应的一级分类节点
      const node = this.treeData.find(n => n.id === id);
      if (node && node.children) {
        this.cat2List = node.children.map(cat2 => ({
          ...cat2,
          children: cat2.children || [] // 确保三级分类存在
        }));
      } else {
        this.cat2List = [];
      }
    },
    hideMenu(id) {
      if (this.activeMenuId === id) {
        this.activeMenuId = null;
      }
    },

    // 获取一级数据
    getRootCategroies() {
      this.$axios.get('/selectRootCategories').then(rs => {
        if (rs.data.code === 5200) {
          this.treeData = rs.data.allCategoryWithChild
          this.cat1List = this.treeData
        }
      })
    },

    // 选择了一级展示二级数据
    cat1Change() {
      this.categoryLevel2Id = ''
      this.categoryLevel3Id = ''
      this.cat2List = []
      this.cat3List = []
      const node = this.treeData.find(n => n.id === this.categoryLevel1Id)
      if (node && node.children) {
        this.cat2List = node.children
      }
    },

    // 选择了二级，展示三级数据
    cat2Change() {
      this.categoryLevel3Id = ''
      this.cat3List = []
      const node = this.cat2List.find(n => n.id === this.categoryLevel2Id)
      if (node && node.children) {
        this.cat3List = node.children
      }
    }
    // 查询该分类下的所有商品
    , searchProduct(cat1Id, cat2Id, cat3Id) {
      this.search.categoryLevel1Id = cat1Id
      this.search.categoryLevel2Id = cat2Id
      this.search.categoryLevel3Id = cat3Id
      this.$router.push({ path: '/search', query: this.search })
    }
  },
  computed: {
    isIndexPage() {
      return this.$route.path === '/';
    }
  },
  watch: {
    '$route'(to) {
      this.show = to.path === '/';
    }
  },
  mounted() {
    this.getRootCategroies()
    this.show = this.$route.path === '/';
  }
};
</script>

<style>
.fj {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.fj a {
  color: white;
}

.fj:hover {
  background-color: white;
  color: #ff4e00;
}

.fj:hover a {
  color: black;
}
</style>